/* ---------- 下拉列 ---------- */
(function () {
    $(".mi-nav-item").hover(function () {
        $(".chinese-menu").stop().slideDown();
    }, function () {
        $(".chinese-menu").stop().slideUp();
    })
    
    let chinese = document.querySelector(".chinese");
    let chinese_li = document.querySelectorAll(".chinese-menu ul li");
    for (let i = 0; i < chinese_li.length; i++){
        chinese_li[i].onmouseover = function () {
            for (let j = 0; j < chinese_li.length; j++){
                chinese_li[j].className = "";
            }
            this.className = "chinese-sel";
        }

        chinese_li[i].onmouseout = function () {
            this.className = "";
        }

        chinese_li[i].onclick = function () {
            chinese.innerHTML = this.innerHTML;
        }
    }
})();

/* ---------- 登录 和 二维码 切换 ---------- */
(function () {
    const btn_tab = $(".btn-tab");
    const login_register = $(".login-register");
    const pvg_box = $(".pvg-box");
    
    btn_tab.on("click", function () {
        if ($(this).hasClass("img-pvg")) {
            $(this).removeClass("img-pvg");
            $(this).addClass("img-com");

            login_register.hide();
            pvg_box.show();
        } else {
            $(this).removeClass("img-com");
            $(this).addClass("img-pvg");

            pvg_box.hide();
            login_register.show();
        }
    })
})();

/* ---------- 登录注册切换 ---------- */
class Switch{
    // 获取节点的方法
    getEle(tag, single = true) {
        // 单个节点对象
        if (single) {
            return document.querySelector(tag);
        } else {
            // 多个节点对象
            return document.querySelectorAll(tag);
        }
    }

    constructor() {
        this.lore = this.getEle(".lore");
        this.login_tab = this.lore.children[0];
        this.register_tab = this.lore.children[1];

        this.login_box = this.getEle(".tabs-login");
        this.register_box = this.getEle(".tabs-register");

        this.addEvent();
    }
    addEvent() {
        const that = this;
        this.login_tab.addEventListener("click", function () {
            that.login_tab.className = "tab-active";
            that.register_tab.className = "";
            that.login_box.style.display = "block";
            that.register_box.style.display = "none"
        })
        this.register_tab.addEventListener("click", function () {
            that.login_tab.className = "";
            that.register_tab.className = "tab-active";
            that.login_box.style.display = "none";
            that.register_box.style.display = "block";
        })
    }
}
new Switch();

/* ---------- 登录和注册输入框事件 ---------- */
class all_Input{
    constructor(ele) {
        this.ele = ele;
        this.addEvent();
    }
    addEvent() {
        for (let i = 0; i < this.ele.length; i++){
            if (this.ele[i].type === "text" || this.ele[i].type === "password" || this.ele[i].type === "number") {
                this.ele[i].onfocus = function () {
                    if (this.name === "account" || this.name === "password" ) {
                        this.style.borderColor = "#ff7e29";
                        this.style.boxShadow = "0 0 0 2px rgb(255 92 0 / 20%)";
                    } else {
                        this.parentNode.style.borderColor = "#ff7e29";
                        this.parentNode.style.boxShadow = "0 0 0 2px rgb(255 92 0 / 20%)";
                    }

                    if (this.nextElementSibling.tagName === "LABEL") {
                        this.nextElementSibling.style.fontSize = "12px";
                        this.nextElementSibling.style.top = "6px";
                        this.nextElementSibling.style.color = "#aaa";
                    }
                }

                this.ele[i].onblur = function () {
                    if (this.name ==  "account" || this.name ==  "password") {
                        this.style.borderColor = "#d9d9d9";
                        this.style.boxShadow = "none";
                    } else {
                        this.parentNode.style.borderColor = "#d9d9d9";
                        this.parentNode.style.boxShadow = "none";
                    }

                    if (this.nextElementSibling.tagName === "LABEL") {
                        if (this.value === "") {
                            this.nextElementSibling.style.fontSize = "17px";
                            this.nextElementSibling.style.top = "20px";
                            this.parentNode.style.color = "rgba(0, 0, 0, 0.4);";
                        }
                    }
                }
            }
        }
    }
};
let login_input = document.querySelectorAll(".tabs-login input");
let register_input = document.querySelectorAll(".tabs-register input");
new all_Input(login_input);
new all_Input(register_input);

/* ---------- 手机号的验证 ---------- */
class phone_Verification{
    constructor() {
        this.phone = document.getElementById("phone");
        this.countryCode = this.phone.previousElementSibling;
        this.phone_num = this.phone.nextElementSibling;
        this.phone_correct = document.getElementsByClassName("phone-correct")[0];
        this.phone_Empty = document.getElementsByClassName("phone-Empty")[0];
        this.addEvent();
    }

    addEvent() {
        let verification = /^1[345789]{1}\d{9}$/;

        this.phone.addEventListener("focus", () => {
            this.phone.style.color = "black";
            this.phone_num.style.color = "#aaa";
        })

        this.phone.addEventListener("blur", () => {
            
            if (verification.test(this.phone.value)) {

                this.phone_correct.style.display = "none";
                this.phone_Empty.style.display = "none";
                this.phone.parentNode.style.background = "#f9f9f9";         // 背景白色
                this.countryCode.style.color = "#aaa";                      // 灰色字体
                this.phone_num.style.color = "#aaa";
            } else if (this.phone.value == "") {

                this.phone_correct.style.display = "none";
                this.phone_Empty.style.display = "block";
                this.phone.parentNode.style.background = "#fcf2f3";         // 背景红色
                this.countryCode.style.color = "#f04645";                   // 字体红色
                this.phone_num.style.color = "#f04645";                     // 字体红色

                this.phone.addEventListener("focus", () => {
                    if (this.phone.value == "") {
                        this.phone_num.style.color = "#f04645";
                    }
                })
                this.phone.addEventListener("blur", () => {
                    if (this.phone.value !== "") {
                        this.phone_num.style.color = "#aaa";
                    }
                })
            } else {
                this.phone_correct.style.display = "block";
                this.phone_Empty.style.display = "none";
                this.phone.parentNode.style.background = "#fcf2f3";
                this.phone_num.style.color = "#f04645";
                this.countryCode.style.color = "#f04645";
            }
        })
    }
}
new phone_Verification()

/* --------- 短信验证码 --------- */
class textMessage{
    constructor() {
        this.text_message = document.getElementById("text-message");
        this.text_message_btn = document.getElementById("verificationCode");
        this.msg = document.getElementsByClassName("SMS")[0];
        this.addEvent();
    }
    addEvent() {
        this.text_message.addEventListener("focus", () => {
            this.text_message.style.color = "black";
        })
        this.text_message.addEventListener("blur", () => {
            if (this.text_message.value === "") {
                this.msg.style.display = "block";
                this.text_message.parentNode.style.background = "#fcf2f3";
                this.text_message.nextElementSibling.style.color = "#f04645";

                this.text_message.addEventListener("focus", () => {
                    if (this.text_message.value == "") {
                        this.text_message.nextElementSibling.style.color = "#f04645";
                    }
                })
                this.text_message.addEventListener("blur", () => {
                    if (this.text_message.value !== "") {
                        this.text_message.nextElementSibling.style.color = "#aaa";
                    }
                })
            } else {
                this.text_message.parentNode.style.background = "#f9f9f9";
                this.msg.style.display = "none";
            }
        })
    }
}
new textMessage();

/* 密码强度 和 判断两次密码输入的是否一致 */
class PasswordStrength{
    constructor() {
        this.setPassword = document.getElementById("setpassword");
        this.setPassword_label = this.setPassword.nextElementSibling;
        this.alphabeticCharacters = document.getElementsByClassName("alphabetic-Characters")[0];
        this.weak_text = document.getElementsByClassName("weak-text")[0];
        this.middle_text = document.getElementsByClassName("middle-text")[0];
        this.strong_text = document.getElementsByClassName("strong-text")[0];

        this.confirmPassword = document.getElementById("confirmPassword");
        this.confirmPassword_label = this.confirmPassword.nextElementSibling;
        this.inputPassword = document.getElementsByClassName("inputPassword")[0];
        this.passwordInconsistent = document.getElementsByClassName("passwordInconsistent")[0];

        this.addEvent();
    }

    addEvent() {

        this.setPassword.addEventListener("focus", () => {
        })

        this.setPassword.addEventListener("blur", () => {
            this.empty();
        });

        this.setPassword.addEventListener("input", () => {
            this.frame();
        });

        this.confirmPassword.addEventListener("blur", () => {
            this.consistent_Password();
        })
        this.confirmPassword.addEventListener("input", () => {
            this.consistent_Password();
        })
    }

    /* 密码正则 8 ~ 20 范围之内 */
    empty(){
        if (this.setPassword.value == "") {
            this.alphabeticCharacters.style.display = "block";
            this.setPassword.parentNode.style.background = "#fcf2f3";
            this.setPassword_label.style.color = "#f04645";

            this.setPassword.addEventListener("focus", () => {
                if (this.setPassword.value == "") {
                    this.setPassword_label.style.color = "#f04645";
                }
            })
            this.setPassword.addEventListener("blur", () => {
                if (this.setPassword.value !== "") {
                    this.setPassword_label.style.color = "#aaa";
                }
            })
        } else {
            this.alphabeticCharacters.style.display = "none";
            this.setPassword.parentNode.style.background = "#f9f9f9";
        }

        if (this.setPassword.value.length < 8 === this.setPassword.value.length > 20) {
            this.alphabeticCharacters.style.display = "none";
            this.setPassword.parentNode.style.background = "#f9f9f9";
            
        } else {
            this.alphabeticCharacters.style.display = "block";
            this.setPassword.parentNode.style.background = "#fcf2f3";
            this.setPassword_label.style.color = "#f04645";

            this.setPassword.addEventListener("focus", () => {
                if (this.setPassword.value.length < 8 !== this.setPassword.value.length > 20) {
                    this.setPassword_label.style.color = "#f04645";
                }
            })
            this.setPassword.addEventListener("blur", () => {
                if (this.setPassword.value.length < 8 === this.setPassword.value.length > 20) {
                    this.setPassword_label.style.color = "#aaa";
                }
            })
        }
    }

    /* 密码强度 */
    frame() {
        let reg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>,.\/]).{8,16}/;
        var num = /\d/;
        var az = /[a-z]/i;
        var symbol = /\W/;
        var weak = 0, middle = 0, strong = 0;
        let str = this.setPassword.value;
        
        if (num.test(str)) {
            weak = 1;
        }
        if (az.test(str)) {
            middle = 1;
        }
        if (symbol.test(str)) {
            strong = 1;
        }

        this.weak_text.style.background = this.middle_text.style.background = this.strong_text.style.background = "#ddd";
        switch(weak + middle + strong){
            case 1:
                this.weak_text.style.backgroundColor = "red"; 
                break;
            case 2:
                this.weak_text.style.backgroundColor = "#ddd";
                this.middle_text.style.backgroundColor = "gold"; 
                break;
            case 3:
                this.middle_text.style.backgroundColor = "#ddd";
                this.strong_text.style.backgroundColor = "#228b22"; 
                break;
        }
    }

    consistent_Password() {
        if (this.setPassword.value !== this.confirmPassword.value) {
            this.passwordInconsistent.style.display = "block";
            this.confirmPassword.style.background = "#fcf2f3";

            this.confirmPassword.addEventListener("input", () => {
                if (this.setPassword.value !== this.confirmPassword.value) {
                    this.confirmPassword_label.style.color = "#f04645";
                } else {
                    this.confirmPassword_label.style.color = "#aaa";
                }
            })
        } else {
            this.passwordInconsistent.style.display = "none";
            this.confirmPassword.style.background = "#f9f9f9";
        }

        if(this.confirmPassword.value === ""){
            this.inputPassword.style.display = "block";
            this.passwordInconsistent.style.display = "none";
            this.confirmPassword.style.background = "#fcf2f3";
            this.confirmPassword_label.style.color = "#f04645";

            this.confirmPassword.addEventListener("focus", () => {
                if (this.confirmPassword.value === "") {
                    this.confirmPassword_label.style.color = "#f04645";
                }
            })
            this.confirmPassword.addEventListener("blur", () => {
                if (this.confirmPassword.value !== "") {
                    this.confirmPassword_label.style.color = "#aaa";
                }
            })
        } else {
            this.inputPassword.style.display = "none";
        }
    }
}
new PasswordStrength();

/* -------------------- 注册功能 -------------------- */
class Register{
    constructor(ops) {
        this.mi_button = ops.mi_button;
        this.iphone = ops.iphone;
        this.pass = ops.pass;
        this.url = ops.url;
        this.addEvent();
    }
    addEvent() {
        this.mi_button.addEventListener("click", () => {
            this.Reload();
        })
    }
    Reload() {
        ajax({
            type:"get",
            url: this.url,
            success: (res) => {
                console.log(res);
                res = JSON.parse(res);
                if (res.code === 0) {
                    alert("注册失败,用户名重复");
                    this.iphone.value = "";
                    this.iphone.focus();
                } else {
                    if (confirm("注册成功，是否需要跳转到登录？")) {
                        location.href = "../html/Login.html"
                    }
                }
            },
            data: {
                type: "register",
                username: this.iphone.value,
                password: this.pass.value,
            },
        })
    }
}
new Register({
    iphone: document.getElementById("phone"),
    pass: document.getElementById("confirmPassword"),
    mi_button: document.querySelectorAll(".mi-button")[1],
    url: "http://localhost:3000/api1",
});